<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas 测试</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="c1" width="500" height="500"></canvas>
<script>
    let c1 = document.getElementById("c1");
    // 获取画笔
    let ctx = c1.getContext("2d");
    // 1) 创建渐变对象
    let g = ctx.createLinearGradient(0, 0, 500, 0);
    // 2) 设置颜色点
    g.addColorStop(0, "blue");
    g.addColorStop(0.5, "red");
    g.addColorStop(1, "green");
    // 3) 将渐变对象应用填充或描边样式
    ctx.fillStyle = g;
    // 4) 画矩形，文本
    ctx.fillRect(0, 0, 500, 100);
</script>
</body>
</html>